<div style="display: grid; gap: 16px">
  <po-progress
    [p-disabled-cancel]="properties.includes('disabledCancel')"
    [p-indeterminate]="properties.includes('indeterminate')"
    [p-show-percentage]="properties.includes('showPercentage')"
    [p-info]="info"
    [p-info-icon]="infoIcon"
    [p-status]="status"
    [p-text]="text"
    [p-value]="value"
    [p-size]="size"
    [p-size-actions]="sizeActions"
    [p-custom-action]="action"
    (p-custom-action-click)="onEvent('p-custom-action-click')"
    (p-cancel)="onEvent('p-cancel')"
    (p-retry)="onEvent('p-retry')"
  />

  <po-widget p-title="Events">
    <po-info [p-value]="event" />
  </po-widget>

  <po-widget p-title="Properties">
    <form #progressBarPropertiesForm="ngForm">
      <po-input class="po-md-6" name="text" [(ngModel)]="text" p-clean p-label="Label" />
      <po-number
        class="po-md-6 po-lg-3"
        name="value"
        [(ngModel)]="value"
        p-clean
        p-label="Value"
        p-max="100"
        p-min="0"
      />
      <po-select class="po-md-6 po-lg-3" name="Size" p-label="Size" [(ngModel)]="size" [p-options]="sizeOptions" />
      <po-select
        class="po-md-6 po-lg-3"
        name="Status"
        p-label="Status"
        [(ngModel)]="status"
        [p-options]="statusOptions"
      />

      <po-select
        class="po-md-6 po-lg-3"
        name="infoIcon"
        [(ngModel)]="infoIcon"
        p-label="Info icon"
        [p-options]="infoIconsOptions"
      />
      <po-input class="po-md-6" name="info" [(ngModel)]="info" p-clean p-label="Info" />

      <po-checkbox-group
        class="po-md-12"
        name="properties"
        [(ngModel)]="properties"
        p-columns="4"
        p-help="Select any options"
        p-label="Properties"
        [p-options]="propertiesOptions"
      >
      </po-checkbox-group>

      <po-radio-group
        class="po-md-12"
        name="sizeActions"
        [(ngModel)]="sizeActions"
        p-columns="4"
        p-label="Size actions"
        p-help="Para aplicar o tamanho small, configure o nível de acessibilidade para AA, ajustável no navbar ou serviço de tema (https://po-ui.io/documentation/po-theme)."
        [p-options]="sizeActionsOptions"
      >
      </po-radio-group>

      <po-switch class="po-md-3" name="addAction" [(ngModel)]="showAction" p-label="Add Action Button" />
    </form>
  </po-widget>

  @if (showAction) {
    <div>
      <po-widget p-title="Action Button">
        <form [formGroup]="actionForm" class="po-row">
          <po-input class="po-md-6 po-lg-4" formControlName="label" p-label="Label" />
          <po-select class="po-md-6 po-lg-3" formControlName="icon" p-label="Icon" [p-options]="iconOptions" />
          <po-select class="po-md-6 po-lg-3" formControlName="type" p-label="Type" [p-options]="typeOptions" />
          <po-switch class="po-md-3 po-lg-2" formControlName="disabled" p-label="Disabled" />
          <po-switch class="po-md-3 po-lg-2" formControlName="visible" p-label="Visible" />
        </form>
      </po-widget>
    </div>
  }

  <div class="po-row">
    <po-button class="po-lg-3 po-md-6" p-label="Sample Restore" (p-click)="restore()"> </po-button>
  </div>
</div>
